/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Carousel, Col, Divider, Slider, Icon, DatePicker } from 'antd';
import styles from './Cockpit.less';
// import request from '../../utils/request';
// import VideoPlayer from '../../components/VideoPlayer';

class Cockpit_3D extends Component {

    constructor(props) {
        super(props)


    }




    render() {

        return (
            //视频视图
            <div className={styles.spTB} style={{ flex: 1, marginTop: "5%", display: 'flex' }}>
                {/* {
                        this.state.spArr.map((item) => {
                            return (
                                <div className={style.spBox}>
                                    <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900}}> <Icon type="double-right" color="#70D7FF" /> 点位名称 : <span style={{ color: '#fff' }}>{item.name}</span> </p>
                                    <div style={{ flex: 1, padding: 10, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                                        <VideoPlayer
                                            width={'42vh'}
                                            height={150}
                                            autoplay={true}
                                            controls={true}
                                            notSupportedMessage={'您的浏览器没有安装或开启Flash,请检查！'}
                                            techOrder={["html5", "flash"]}
                                            sources={[{ src: item.url, type: 'rtmp/flv' }]}
                                        />
                                    </div>
                                </div>
                            )
                        })
                    } */}
                <div style={{ width: 450, height: '100%', display: 'flex', padding: 10, flexDirection: 'column'}}>
                    <div style={{ height: '30%', flex: 1, display: 'flex', flexDirection: 'column' ,border:'1px solid #70D7FF' }}>
                        <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>Cr污染现状</span> </p>
                        <div style={{ flex: 1 }} className={styles.crwr}>
                            <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/one/mp4/2.mp4"> </a>
                        </div>

                    </div>
                    <div style={{ height: '30%', flex: 1, margin: '10px 0px', display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }}>
                        <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>Cr6污染现状</span> </p>
                        <div style={{ flex: 1 }} className={styles.cr6wr}>
                            <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/one/mp4/3.mp4"></a>
                        </div>
                    </div>
                    <div style={{ height: '30%', flex: 1, display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }}>
                        <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>Pb污染现状</span> </p>
                        <div style={{ flex: 1 }} className={styles.pbwr}>
                            <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/one/mp4/4.mp4"></a>
                        </div>
                    </div>

                </div>
                <div style={{ flex: 1, height: '100%', padding: 10, flexDirection: 'column', display: 'flex' }}>
                    <div style={{ height: '30%', flex: 2, backgroundColor: '#fff' }}>

                    </div>
                    <div style={{ height: '30%', flex: 3, margin: '10px 0px', display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }}>
                        <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>清挖-回填</span> </p>
                        <div style={{ flex: 1 }} className={styles.qwht}>
                            <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/qwht.mp4"></a>
                        </div>
                    </div>
                    <div style={{ height: '30%', flex: 2, display: 'flex' }}>
                        <div style={{ flex: 1, display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }} >
                            <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>一次降水</span> </p>
                            <div style={{ flex: 1 }} className={styles.ycjs}>
                                <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/two/mp4/1.mp4"></a>
                            </div>
                        </div>
                        <div style={{ width: 20 }}></div>

                        <div style={{ flex: 1, display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }} >
                            <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}>  点位名称 : <span style={{ color: '#fff' }}>二次降水</span> </p>
                            <div style={{ flex: 1 }} className={styles.ecjs}>
                                <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/three/mp4/2.mp4"></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={{ width: 450, height: '100%', display: 'flex', padding: 10, flexDirection: 'column' }}>
                    <div style={{ height: '30%', flex: 1, display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }}>
                        <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>Zn污染现状</span> </p>
                        <div style={{ flex: 1 }} className={styles.znwr}>
                            <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/one/mp4/5.mp4"></a>
                        </div>
                    </div>
                    <div style={{ height: '30%', flex: 1, margin: '10px 0px', display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }}>
                        <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>Cd污染现状</span> </p>
                        <div style={{ flex: 1 }} className={styles.cdwr}>
                            <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/one/mp4/6.mp4"></a>
                        </div>
                    </div>
                    <div style={{ height: '30%', flex: 1, display: 'flex', flexDirection: 'column',border:'1px solid #70D7FF' }}>
                        <p className={styles.Title} style={{ fontFamily: "wd", fontWeight: 900 }}> 点位名称 : <span style={{ color: '#fff' }}>As污染现状</span> </p>
                        <div style={{ flex: 1 }} className={styles.aswr}>
                            <a target='blank' style={{ color: '#70D7FF', display: 'block', width: '100%', height: '100%' }} href="http://118.31.239.132:8083/file/one/mp4/7.mp4"></a>
                        </div>
                    </div>

                </div>


            </div>



        )
    }
}
export default (Cockpit_3D);
